<template>
	<view class="pay-confirm-container">
		<uni-popup mask-background-color="rgba(0,0,0,0.4)" ref="pay_popup" type="bottom" :safe-area="false">
			<view class="main-container">
				<template v-if="operaInfo&&operaCollectionInfo">
					<view class="slogan flex align-center">
						<uni-icons type="heart-filled" size="24" color="#ff0000"></uni-icons>
						<text>原创不易，支持作者</text>
						<uni-icons type="heart-filled" size="24" color="#ff0000"></uni-icons>
					</view>
					<view class="content-char">
						充值购买后可继续观看《{{ operaInfo.name }}》
					</view>
					<view class="flex align-center justify-between">
						<view class="content-char">
							第{{operaCollectionInfo.sort_num}}集/共{{ operaInfo.opera_collection_count }}集
						</view>
						<view class="content-char">
							本集价格:<text>{{ operaInfo.v_money }}</text>币
						</view>
					</view>
				</template>
				
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<view class="pay-channel">
							<text class="myicon icon-weixinzhifu" style="color: #00c800;margin-right: 6px;font-size: 16px;"></text>
							<text>微信支付</text>
						</view>
						<view class="pay-channel">
							<text class="myicon icon-zhifubao" style="color: #06b4fd;margin-right: 6px;font-size: 16px;"></text>
							<text>支付宝</text>
						</view>
					</view>
					<view class="content-char">
						账户余额:<text>{{ userInfo.v_money }}</text>K币
					</view>
				</view>

				<view class="grid-container">
					<template v-if="chargeoptionList">
						<view @click="close" class="grid-item flex align-center justify-center" v-for="(item,index) in chargeoptionList.data">
							<view class="" @click="pay(item)">
								<view class="amount">
									{{ item.amount }}<text>元</text>
								</view>
								<view class="sub-amount">
									(多送<text>{{ item.amount_give }}</text>元)
								</view>
								<view class="coin">
									{{ item.v_money }}+{{ item.v_money_give }}K币
								</view>
								<!-- <view v-if="index==1" class="fire">
									<text class="myicon icon-quality" style="color: #ff0000;font-size: 24px;"></text>
								</view> -->
							</view>
						</view>
					</template>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "PayConfirm",
		props:{
			opera_id:{
				type:Number,
				default:0
			},
			opera_collection_id:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				show: false,
				chargeoptionList: [],
				operaInfo: null,
				operaCollectionInfo: null,
				userInfo: {}
			}
		},
		created() {
			// 购买信息列表
			this.get('crud/list',{table:'charge_option',limit:9999}).then(({code,paginate})=>{
				if(code==1){
					this.chargeoptionList=paginate
				}
			});
			if(this.opera_id){
				// 当前电视剧
				this.get('crud/detail',{table:'opera', table_id:this.opera_id}).then(({code,detail})=>{
					if(code==1){
						this.operaInfo=detail
					}
				});
			}
			if(this.opera_collection_id){
				this.get('crud/detail',{table:'opera_collection', table_id:this.opera_collection_id}).then(({code,detail})=>{
					if(code==1){
						this.operaCollectionInfo=detail
					}
				});
			}
			// 用户
			this.get('user/user_info').then(({code,user_info})=>{
				if(code==1){
					this.userInfo=user_info
				}
			});
		},
		methods: {
			pay(item){
				item.subject = '充值';
				item.body = '充值';
				this.get('douyin/create_pay',{...item}).then(({code,order_data})=>{
					if(code==1){
						uni.requestPayment({
						    provider: 'toutiao',
							service:5,
						    orderInfo: {
								order_id: order_data.data.order_id,
								order_token:order_data.data.order_token,
							  }, 
						    success:  (res)=> {
						        console.log('success:',res);
								// let resList = JSON.stringify(res);
								if(res.code === 0){
									if(this.opera_id&&this.opera_collection_id){
										setTimeout(()=>{
											this.post('feelog/save', {
												vmoney: this.operaInfo.v_money,
												opera_id: this.opera_id,
												opera_collection_id: this.opera_collection_id,
											}).then(({code, msg})=>{
												if(code==1){
													this.success('购买成功');
													this.redirect('/pages/opera/video/play?opera_id='+opera_id+'&opera_collection_id='+this.opera_collection_id, 1200)
												}
											});
										},300)
									}else{
										this.success('充值成功');
										this.redirect('/pages/opera/my/my', 1200)
									}
								}
						    },
						    fail:  (err) =>{
						        console.error('fail:' + JSON.stringify(err));
						    }
						});
					}
				})
			},
			open() {
				this.$refs.pay_popup.open()
			},
			close() {
				this.$refs.pay_popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-confirm-container {
		z-index: 9999;
		.main-container {
			background: #ffffff;
			width: 750rpx;
			border-radius: 32rpx 32rpx 0 0;
			box-sizing: border-box;
			padding: 24rpx;
			z-index: 9999;
			.slogan {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.content-char {
				font-size: 28rpx;
				color: #666666;
				margin-top: 10rpx;

				text {
					color: #f69316;
				}
			}

			.pay-channel {
				margin-right: 20rpx;
				margin-top: 10rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}
			}
			
			.grid-container{
				margin-top: 20rpx;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-row-gap: 24rpx;
				grid-column-gap: 78rpx;
				
				.grid-item{
					text-align: center;
					border-radius: 16rpx;
					height: 180rpx;
					background: #efefef;
					position: relative;
					
					.amount{
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;
						
						text{
							font-size: 24rpx;
						}
					}
					
					.sub-amount{
						font-size: 28rpx;
						color: #666666;
						margin-top: 10rpx;
						font-weight: bold;
						text{
							color: #ff0000;
						}
					}
					
					.coin{
						font-size: 28rpx;
						color: #666666;
						margin-top: 10rpx;
					}
					
					.fire{
						position: absolute;
						top: -20rpx;
						right: -20rpx;
					}
				}
			}
		}
	}
</style>